<template>
  <a-modal
    title="添加设施"
    width="90%"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭"
    wrapClassName="ant-modal-cust-warp"
    style="top: 5%; height: 85%; overflow-y: hidden"
  >
    <a-transfer
      :data-source="facilitiesList"
      :target-keys="targetKeys"
      :disabled="disabled"
      :show-search="showSearch"
      :filter-option="
        (inputValue, item) => item.facilitiesName.indexOf(inputValue) !== -1
      "
      :show-select-all="false"
      @change="onChange"
    >
      <template
        slot="children"
        slot-scope="{
          props: {
            direction,
            filteredItems,
            selectedKeys,
            disabled: listDisabled,
          },
          on: { itemSelectAll, itemSelect },
        }"
      >
        <a-table
          :row-selection="
            getRowSelection({
              disabled: listDisabled,
              selectedKeys,
              itemSelectAll,
              itemSelect,
            })
          "
          :columns="direction === 'left' ? leftColumns : rightColumns"
          :data-source="filteredItems"
          size="small"
          :style="{ pointerEvents: listDisabled ? 'none' : null }"
          :custom-row="
            ({ key, disabled: itemDisabled }) => ({
              on: {
                click: () => {
                  if (itemDisabled || listDisabled) return;
                  itemSelect(key, !selectedKeys.includes(key));
                },
              },
            })
          "
        />
      </template>
    </a-transfer>

    <a-switch
      un-checked-children="开启搜索"
      checked-children="关闭搜索"
      :checked="showSearch"
      style="margin-top: 16px"
      @change="triggerShowSearch"
    />
  </a-modal>
</template>
 
<script>
import {
  addRole,
  editRole,
  duplicateCheck,
  getFacilitiesList,
  queryFacilitiesBoundaryPageList,
} from "@/api/api";
import difference from "lodash/difference";
import { ListMixin } from "@/mixins/ListMixin";

const leftTableColumns = [
  {
    dataIndex: "facilitiesName",
    title: "设施名称",
  },
  {
    dataIndex: "industryName",
    title: "所属行业",
  },
  {
    dataIndex: "boundaryName",
    title: "排放源",
  },
  {
    dataIndex: "principal",
    title: "负责人",
  },
  {
    dataIndex: "informant",
    title: "填报员",
  },
];
const rightTableColumns = [
  {
    dataIndex: "facilitiesName",
    title: "设施名称",
  },
  {
    dataIndex: "industryName",
    title: "所属行业",
  },
  
  {
    dataIndex: "boundaryName",
    title: "排放源",
  },
  {
    dataIndex: "principal",
    title: "负责人",
  },
  {
    dataIndex: "informant",
    title: "填报员",
  },
];

export default {
  props:['facilitiesList'],
  name: "RoleModal",
  // mixins: [ListMixin],
  data() {
    return {
      dataSource: [],
      title: "操作",
      visible: false,
      roleDisabled: false,
      model: {},
      layout: {
        labelCol: { span: 3 },
        wrapperCol: { span: 14 },
      },
      url: {
        list: "/accounting/gmAccountingFacilitiesInfo/list",
      },
      confirmLoading: false,
      targetKeys: [], //originTargetKeys,
      disabled: false,
      showSearch: false,
      leftColumns: leftTableColumns,
      rightColumns: rightTableColumns,
    };
  },
  mounted() {
    // queryFacilitiesBoundaryPageList().then((res) => {
    //   var Data = res.result;
    //   Data.forEach((item, index) => {
    //     item.title = item.fbId;
    //     item.key = item.fbId;
    //   });
      
    //   this.dataSource = Data;
    // });
  },
  watch: {},
  methods: {
    handleCancel() {
      this.close();
    },
    handleOk() {
      this.$emit("ok");
      this.close();

      return;
      const that = this;
      // 触发表单验证
      this.$refs.form.validate((valid) => {
        if (valid) {
          that.confirmLoading = true;
          let obj;
          if (!this.model.id) {
            obj = addRole(this.model);
          } else {
            obj = editRole(this.model);
          }
          obj
            .then((res) => {
              if (res.success) {
                that.$message.success(res.message);
                that.$emit("ok");
              } else {
                that.$message.warning(res.message);
              }
            })
            .finally(() => {
              that.confirmLoading = false;
              that.close();
            });
        } else {
          return false;
        }
      });
    },
    close() {
      this.visible = false;
    },
    onChange(nextTargetKeys) {
      //   console.log(nextTargetKeys);
      this.targetKeys = nextTargetKeys;
    },

    // triggerDisable(disabled) {
    //   this.disabled = disabled;
    // },

    triggerShowSearch(showSearch) {
      this.showSearch = showSearch;
    },
    getRowSelection({ disabled, selectedKeys, itemSelectAll, itemSelect }) {
      return {
        getCheckboxProps: (item) => ({
          props: { disabled: disabled || item.disabled },
        }),
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows
            .filter((item) => !item.disabled)
            .map(({ key }) => key);
          const diffKeys = selected
            ? difference(treeSelectedKeys, selectedKeys)
            : difference(selectedKeys, treeSelectedKeys);
          itemSelectAll(diffKeys, selected);
        },
        onSelect({ key }, selected) {
          itemSelect(key, selected);
        },
        selectedRowKeys: selectedKeys,
      };
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/css/newrModule.scss";
</style>